.box{
    background: #6f0b02;
    width: 1000px;
    height: 400px;
    transition-property: width,background-image;
    transition-duration: 2s;
}
.box1{
    float: left;
    width: 48px;
    height: 380px;
    background-image: url(../img/j1.png);
}
.box2{
    float: left;
    width: 0px;
    height: 380px;
    background-image: url(../img/j2.png);
    background-position: right top 1px;
    transition-property: width;
    transition-duration: 2s;
}
.box3{
    float: left;
    width: 0px;
    height: 380px;
    background-image: url(../img/j3.png);
    background-position: left -20px top 0px;
    transition-property: width;
    transition-duration: 2s;
}
.box4{
    float: left;
    width: 40px;
    height: 380px;
    background-image: url(../img/j4.png);
}
.box:hover .box2{
    width: 360px;
}
.box:hover .box3{
    width: 345px;
}